<template>
	<view class="comment-card bg-white">
		<!-- 评分 日期 -->
		<view class="score-date">
			<view class="dish-score">
				<uni-rate
					:value="score"
					:size="18"
					allowHalf
					touchable
				/>
				<view class="dish-score-rating">{{ score }}</view>
			</view>

			<!-- <view class="score-date-date">{{ date }}</view> -->
			<uni-dateformat
				class="score-date-date"
				:date="date"
				:threshold="[60000, 4 * 24 * 60 * 60 * 1000]"
			/>
		</view>
		<!-- 评论 -->
		<view class="comment-text">{{ comment }}</view>
		<!-- 用户 点赞 -->
		<view class="username-like">
			<view class="username-like-username">匿名用户</view>
			<view
				class="username-like-like"
				@tap="onLiked"
			>
				<uni-icons
					:color="liked ? '#c956f0' : ''"
					class="username-like-icon"
					type="hand-up-filled"
					size="26"
				></uni-icons>
				<view>{{ likedCount > 99 ? '99+' : likedCount }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'CommentCard',
	props: {
		score: { type: Number, default: 0 },
		date: { type: String, default: ' ' },
		comment: { type: String, default: ' ' },
		likedCount: { type: Number, default: 0 },
		liked: { type: Boolean, default: false },
	},
	data() {
		return {};
	},
	methods: {
		onLiked() {
			this.$emit('liked');
		},
	},
};
</script>

<style scoped>
.comment-card {
	padding: 26rpx;
	font-size: 14px;
	border-bottom: 1px solid #e2e2e2;
}
.score-date {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.dish-score {
	display: flex;
	align-items: center;
}

.dish-score-rating {
	color: #fac909;
	font-weight: bold;
	width: 66rpx;
	margin-left: 16rpx;
}

.score-date-date {
	color: #969696;
}

/* 评论文字 */
.comment-text {
	padding: 24rpx 0;

	display: inline-block;
	height: auto;
	word-break: break-all;
	text-overflow: ellipsis;
	word-wrap: break-word;
	white-space: pre-wrap;
}
.username-like {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.username-like-username {
	color: #8a8a8a;
}
.username-like-like {
	display: flex;
}
.username-like-icon {
	/* margin-right: 8rpx; */
}
</style>
